<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-07-20 10:26:39
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-20 11:17:48
-->
<template>
  <div>
    <br><hr>
    <h4>watch && watchEffect</h4>
    <fieldset>
      <legend>姓名操作</legend>
      姓氏：<input type="text" placeholder="请输入姓氏" v-model="user.firstName"><br><br>
      名字：<input type="text" placeholder="请输入名字" v-model="user.lastName">
    </fieldset>
    <br><br>
    <fieldset>
      <legend>计算属性和监视的演示</legend>
      姓名：<input type="text" placeholder="显示姓名" v-model="fullName1">&nbsp;<i>fullName1</i><br><br>
    </fieldset>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
export default defineComponent ({
  name: 'watchAndwatchEffect',
  setup(){
    // 定义一个响应式对象
    const user = reactive({
      // 姓氏
      firstName: "东方",
      // 名字
      lastName: "不败"
    })
    const fullName1 = ref('')
    watch(user, ({firstName, lastName}) => {
      fullName1.value = firstName + '_' + lastName
    }, {immediate: true}) // immediate 默认会执行一次watch deep：深度监视
    // watch 可以监视多个数据 watch([], () => {})
    // 注意：watch 监视非响应式数据时，代码要改一下才会监视到
    watch([() => user.firstName], () => {
      console.log('=====');
      
    })
    return {
      user,
      fullName1
    }
  }
})
</script>

<style lang="scss" scoped>
    
</style>